<template>
  <div>
    <!-- 边框 -->
    <el-card class="box-card" style="margin-top: 10px">
      <!-- 添加按钮 -->
      <el-button type="primary" class="add" @click="dialogFormVisible = true"
        >添加角色</el-button
      >
      <!-- 添加按钮 -->
      <!-- 表格 -->
      <template>
        <el-table border :data="tableData" style="width: 100%">
          <!-- 箭头 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <!-- 第一层 -->
              <el-row
                class="big"
                v-for="(item1, index1) in props.row.children"
                :key="item1.id"
              >
                <el-col :span="4"
                  ><el-tag closable type="success">{{
                    item1.authName
                  }}</el-tag></el-col
                >
                <el-col :span="20">
                  <!-- 第二层 -->
                  <el-row
                    v-for="(item2, index2) in item1.children"
                    :key="item2.id"
                  >
                    <el-col :span="4"
                      ><el-tag closable type="warning">{{
                        item1.authName
                      }}</el-tag></el-col
                    >
                    <!-- 第三层 -->
                    <el-col :span="20"
                      ><el-tag
                        @close="dels(props.row, item3.id)"
                        closable
                        type="danger"
                        v-for="(item3, index3) in item2.children"
                        :key="item3.id"
                        >{{ item1.authName }}</el-tag
                      ></el-col
                    >
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <!-- 箭头 -->
          <!-- # -->
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <!-- 角色名称 -->
          <el-table-column prop="roleName" label="角色名称"> </el-table-column>
          <!-- 角色描述 -->
          <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <!-- 删除 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
              <!-- 分配权限 -->
              <el-button type="warning" icon="el-icon-share" @click="rightsTree(scope.row)"
                >分配权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 表格 -->
      <!-- 对话框 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <!-- 内容 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 角色名称 -->
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>
          <!-- 角色描述 -->
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 对话框 -->
      <!-- 对话框编辑 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible1">
        <!-- 内容 -->
        <el-form
          :model="ruleForm1"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 角色名称 -->
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm1.roleName"></el-input>
          </el-form-item>
          <!-- 角色描述 -->
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm1.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <!-- 内容 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="editOK()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 对话框编辑 -->
      <!-- 对话框权限 -->

      <el-dialog title="分配权限" :visible.sync="dialogFormVisible2">
        <!-- 内容 -->
        <el-tree
          :data="rights"
          show-checkbox
          node-key="id"
          ref="tree"
           highlight-current
          default-expand-all
          :default-checked-keys="checkId"
          :props="defaultProps"
        >
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="rightsOK"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
    <!-- 边框 -->
  </div>
</template>

<script>
import {
  getRole,
  rolesAdd,
  rolesDel,
  rolesEdit,
  rolesRight,
  rightsTree,
  rightsOK
} from "@/request/api.js";
export default {
  data() {
    return {
      //存放权限ID
      checkId:[],
      //所以权限数据
      rights: [],
      //页面数据
      tableData: [], 
      //对话框添加数据
      ruleForm: {
        roleName: "",
        roleDesc: "",
      },
      //对话框编辑数据
      ruleForm1: {
        roleName: "",
        roleDesc: "",
      },
      //所以权限数据
      defaultProps:{label:'authName',children:'children'},
      //对话框状态
      dialogFormVisible: false,
      //对话框编辑状态
      dialogFormVisible1: false,
      //分配权限对话框状态
      dialogFormVisible2: false,
      //角色权限ID
      roleId : 0,

      //对话框添加规则
      rules: {
        roleName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入用户描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //页面请求数据
    getRoleAll() {
      getRole().then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          rolesAdd(this.ruleForm).then((res) => {
            console.log(res);
            this.$message("添加成功");
            this.getRoleAll();
            this.dialogFormVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rolesDel({ id: row.id }).then((res) => {
            console.log(res);
            this.getRoleAll();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑回填
    edit(row) {
      // console.log(index, row);
      this.dialogFormVisible1 = true;
      this.ruleForm1.roleName = row.roleName;
      this.ruleForm1.roleDesc = row.roleDesc;
      this.ruleForm1.id = row.id;
    },
    //编辑修改
    editOK() {
      rolesEdit(this.ruleForm1.id, this.ruleForm1).then((res) => {
        console.log(res);
        this.getRoleAll();
        this.dialogFormVisible1 = false;
      });
    },
    //删除角色下面的权限
    async dels(row, rightId) {
      let result = await this.$confirm("您确定要删除吗?", "温馨提示").catch(
        (err) => console.error(err)
      );

      if (result !== "confirm") return;
      //删除后台数据
      let { data } = await rolesRight(row, rightId).catch((err) =>
        console.error(err)
      );

      // if(data.mate.status !== 200) {
      //   return this.$message({
      //     message: "删除权限失败",
      //     type:"error"
      //   })
      // }
      //删除页面数据
      row.children = data.data;
    },
    //请求所以权限数据
    rightsTree(row) {
      console.log(row)
      this.roleId = row.id
      this.dialogFormVisible2 = true;
      rightsTree().then((res) => {
        console.log(res);
        this.rights = res.data.data;
         //获取所以权限ID
        this.check(row.children)
         
      });
     
   
    },
       //递归
    check(arr) {
        arr.forEach((item)=>{
          if(item.children) {
            return this.check(item.children)
          }else {
            this.checkId.push(item.id)
          }
        })
      },
      //角色权限修改
      rightsOK(){
        let arr1 = this.$refs.tree.getCheckedKeys()
        let arr2 = this.$refs.tree.getHalfCheckedKeys()
        let arr3 = [...arr1,arr2]
        rightsOK(this.roleId,{rids : arr3.join(',')}).then((res)=>{
          console.log(res)
          this.getRoleAll();
           this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialogFormVisible2 = false
        })
      },
  },
  created() {
    this.getRoleAll();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.add {
  margin-right: 1150px;
  margin-bottom: 10px;
}
.box {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.el-tag {
  margin: 5px;
}
.big {
  display: flex;
  align-items: center;
}
</style>
